/* 企业UI设计系统 */

/* 扩展颜色系统 */
:root {
  --color-primary: #0056b3;
  --color-primary-dark: #004494;
  --color-primary-light: #3380c5;
  --color-secondary: #455a64;
  --color-secondary-dark: #37474f;
  --color-secondary-light: #607d8b;
  --color-accent: #00acc1;
  --color-accent-dark: #007c91;
  --color-accent-light: #5ddef4;
  --color-success: #2e7d32;
  --color-warning: #f9a825;
  --color-error: #d32f2f;
  --color-info: #0288d1;
  --color-bg-primary: #f8f9fa;
  --color-bg-secondary: #ffffff;
  --color-bg-dark: #263238;
  --color-text-primary: #263238;
  --color-text-secondary: #455a64;
  --color-text-light: #78909c;
  --color-text-on-dark: #eceff1;
  --color-border: #e0e0e0;
  --color-shadow: rgba(0, 0, 0, 0.08);
  
  /* 暗黑模式变量 */
  --dark-bg-primary: #1a1f23;
  --dark-bg-secondary: #263238;
  --dark-bg-card: #2c353d;
  --dark-border: #37474f;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* 按钮系统 */
  .ent-btn {
    @apply font-medium py-2 px-4 rounded transition-all duration-200 inline-flex items-center justify-center gap-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60 disabled:cursor-not-allowed;
  }
  
  .ent-btn-primary {
    @apply ent-btn bg-blue-600 hover:bg-blue-700 text-white border border-blue-600 focus:ring-blue-400;
  }
  
  .ent-btn-secondary {
    @apply ent-btn bg-gray-600 hover:bg-gray-700 text-white border border-gray-600 focus:ring-gray-400;
  }
  
  .ent-btn-outline {
    @apply ent-btn bg-transparent border border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 focus:ring-blue-400;
  }
  
  .ent-btn-ghost {
    @apply ent-btn bg-transparent text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-400;
  }
  
  /* 输入框 */
  .ent-input {
    @apply block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm text-gray-900 dark:text-gray-200 
    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 
    disabled:bg-gray-100 disabled:text-gray-500 dark:disabled:bg-gray-900;
  }
  
  /* 卡片 */
  .ent-card {
    @apply bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden;
  }
  
  .ent-card-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50;
  }
  
  .ent-card-body {
    @apply p-6;
  }
  
  .ent-card-footer {
    @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50;
  }
  
  /* 表格 */
  .ent-table {
    @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
  }
  
  .ent-table-header {
    @apply bg-gray-50 dark:bg-gray-800;
  }
  
  .ent-table-th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider;
  }
  
  .ent-table-td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-200;
  }
  
  .ent-table-row {
    @apply bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/70;
  }
  
  /* 标签 */
  .ent-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .ent-badge-blue {
    @apply ent-badge bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
  }
  
  .ent-badge-green {
    @apply ent-badge bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
  }
  
  .ent-badge-red {
    @apply ent-badge bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
  }
  
  .ent-badge-yellow {
    @apply ent-badge bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
  }
  
  /* 导航与侧边栏 */
  .ent-sidebar {
    @apply bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col h-full;
  }
  
  .ent-sidebar-item {
    @apply flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-blue-600 dark:hover:text-blue-400;
  }
  
  .ent-sidebar-item-active {
    @apply ent-sidebar-item bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400;
  }
  
  /* 通知 */
  .ent-notification {
    @apply rounded-md p-4 mb-4;
  }
  
  .ent-notification-info {
    @apply ent-notification bg-blue-50 dark:bg-blue-900/30 border-l-4 border-blue-500;
  }
  
  .ent-notification-success {
    @apply ent-notification bg-green-50 dark:bg-green-900/30 border-l-4 border-green-500;
  }
  
  .ent-notification-warning {
    @apply ent-notification bg-yellow-50 dark:bg-yellow-900/30 border-l-4 border-yellow-500;
  }
  
  .ent-notification-error {
    @apply ent-notification bg-red-50 dark:bg-red-900/30 border-l-4 border-red-500;
  }
}

/* 自定义滚动条 */
.ent-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.ent-scrollbar::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-800 rounded-full;
}

.ent-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-600 rounded-full hover:bg-gray-400 dark:hover:bg-gray-500;
}

/* 过渡动画 */
.ent-fade-enter-active,
.ent-fade-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ent-fade-enter-from,
.ent-fade-leave-to {
  opacity: 0;
  transform: translateY(-4px);
} 